<template>
  <div class="custom_icons" vv-if="item.data">
    <div class="custom_icons_top" :ref="'icons_' + index">
      <div
        class="custom_icons_content"
        :style="{
          width:
            (80 * item.data.length + item.data.length * 10) /
              (item.rowCount || 1) /
              23.44 +
            'rem',
          height: 80 / 23.44 + 'rem',
          margin:
            item.rowCount > 1 && scrollWidth <= screenWidth
              ? '0 0 0 ' + item.offset / 23.44 + 'rem'
              : '',
        }"
      >
        <div
          class="custom_icons_item"
          v-for="(icon, index) in item.data"
          :key="'icon_index_' + index"
        >
          <a :href="icon.url" target="_blank">
            <img :src="icon.image" v-lazy="icon.image" v-if="icon.image" />
            <van-icon :name="icon.icon" v-else />
            <p>{{ icon.title }}</p>
          </a>
        </div>
      </div>
    </div>
    <div class="custom_icons_indicators" :ref="'icon_indicators_' + index">
      <div
        class="custom_icons_indicators_dock"
        :class="scrollWidth <= screenWidth && 'disabled'"
        :ref="'icon_indicators_dock_' + index"
        :style="{ left: iconDockLeft / 23.44 + 'rem' }"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "icons",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {
      iconDockLeft: 0,
      scrollWidth: 0,
      screenWidth: 0,
    };
  },
  updated() {
    //this.init();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(function() {
        let dom = this.$refs["icons_" + this.$props.index],
          that = this;
        that.scrollWidth = dom.scrollWidth;
        that.screenWidth = screen.width;
        dom.addEventListener("scroll", function(e) {
          let dockParent = that.$refs["icon_indicators_" + that.$props.index],
            dock = that.$refs["icon_indicators_dock_" + that.$props.index];
          let left = e.srcElement.scrollLeft,
            scrollWidth = e.srcElement.scrollWidth,
            width = e.srcElement.offsetWidth;
          that.iconDockLeft =
            (dockParent.offsetWidth - dock.offsetWidth) *
            (left / (scrollWidth - width));
        });
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_icons {
  position: relative;
  padding: 0 0 (20 / @base) 0;
  background-color: #fff;
  .custom_icons_top {
    padding: (10 / @base) 0;
    overflow: scroll;
    overflow-y: hidden;
    .custom_icons_content {
      .custom_icons_item {
        float: left;
        margin: (5 / @base);
        box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        border-radius: (5 / @base);
        padding: 0 0 (10 / @base) 0;
        overflow: hidden;
        &:first-child {
          margin: (5 / @base) (5 / @base) 0 (5 / @base);
        }
        &:last-child {
          margin: (5 / @base) (5 / @base) 0 (5 / @base);
        }
        a {
          display: block;
          img {
            width: (80 / @base);
            height: (80 / @base);
            background-color: #999;
          }
          .van-icon {
            width: (80 / @base);
            height: (40 / @base);
            line-height: (40 / @base);
          }
          p {
            font-size: (14 / @base);
          }
        }
      }
    }
  }
  .custom_icons_indicators {
    background-color: #efefef;
    border-radius: (20 / @base);
    height: (5 / @base);
    position: absolute;
    bottom: (10 / @base);
    left: 40%;
    right: 40%;
    overflow: hidden;
    .custom_icons_indicators_dock {
      height: (5 / @base);
      border-radius: (20 / @base);
      background-color: chocolate;
      width: 20%;
      position: absolute;
      top: 0;
      &.disabled {
        background-color: #ccc;
      }
    }
  }
}
</style>
